<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">网站管理</a></li>
        <li class="active">发布文章</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <div class="box-body">
            <form id="articleForm" class="form-horizontal">
                <input id="status" type="hidden" name="status">
                <input id="articleContent" type="hidden" name="content">
                <input id="articleContentMd" type="hidden" name="contentMd">
                <div class="col-lg-8 pl0">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <input type="text" class="form-control" id="title" name="title" placeholder="请输入文章标题"
                                   require="">
                        </div>
                    </div>
                    <div class="form-group form-editor">
                        <div class="col-xs-12">
                            <textarea id="articleField"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 article-extra">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <a class="article-btn table-btn table-btn-info" onclick="saveArticle(0)">保存草稿</a>
                            <a class="article-btn table-btn table-btn-info ml10" onclick="saveArticle(1)">发布文章</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">文章类型:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input class="minimal" type="radio" name="original" checked value="1">原创
                                </label>
                                <label>
                                    <input class="minimal" type="radio" name="original" value="0">转载
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12 ">
                            <label class="control-label label-four">文章分类:</label>
                            <div class="ml80">
                                <select id="category-select" class="form-control" name="categoryId" require="">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">文章标签:</label>
                            <div class="tags checkbox icheck ml80">
                                <label th:each="tag:${tags}">
                                    <input class="minimal" type="checkbox" name="tag" th:value="${tag.id}"
                                           th:text="${tag.name}">
                                </label>
                            </div>
                        </div>

                    </div>
                    <!--   <div class="form-group">
                           <div class="col-xs-12">
                               <label class="control-label label-four">文章简介:</label>
                               <div class="ml80">
                                   <textarea type="text" rows="3" class="form-control" name="description" require=""></textarea>
                               </div>
                           </div>
                       </div>-->
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">文章封面:</label>
                            <div class="input-group ml80" style="position: relative">
                                <input type="text" class="form-control" name="coverImage" id="coverImage"
                                       placeholder="文章封面地址" require="">
                                <div class="btn btn-default input-group-btn jax-upload-btn" style="min-width: 50px">
                                    <i class="fa fa-cloud-upload upload-img-btn"></i>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div id="upload-content" class="upload-content form-group"></div>
                    <div id="sliderImgContent" class="form-group display-none">
                        <div class="col-xs-12">
                            <label class="control-label label-four">轮播图:</label>
                            <div class="input-group ml80" style="position: relative">
                                <input id="sliderImg" type="text" class="form-control" name="sliderImg"
                                       placeholder="轮播图地址（建议800*300）" require="">
                                <div class="btn btn-default input-group-btn jax-upload-btn" style="min-width: 50px">
                                    <i class="fa fa-cloud-upload upload-slider-btn"></i>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">是否轮播:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input class="minimal" type="radio" name="slider" value="1">是
                                </label>
                                <label>
                                    <input class="minimal" type="radio" name="slider" checked value="0">否
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">是否置顶:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input class="minimal" type="radio" name="top" value="1">是
                                </label>
                                <label>
                                    <input class="minimal" type="radio" name="top" checked value="0">否
                                </label>
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">是否推荐:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input class="minimal" type="radio" name="recommended" value="1">是
                                </label>
                                <label>
                                    <input class="minimal" type="radio" name="recommended" checked value="0">否
                                </label>
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">开启评论:</label>
                            <div class="tags ml80 checkbox icheck">
                                <label>
                                    <input class="minimal" type="radio" name="comment" checked value="1">是
                                </label>
                                <label>
                                    <input class="minimal" type="radio" name="comment" value="0">否
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 article-extra mt20">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">概要:</label>
                            <div class="ml80">
                                <textarea type="text" rows="2" class="form-control" name="description" require=""
                                          placeholder="文章概要"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label label-four">关键词:</label>
                            <div class="ml80">
                                <textarea type="text" rows="2" class="form-control" name="keywords" require=""
                                          placeholder="文章关键词（SEO优化）"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>

<script>
    ClassicEditor
        .create(document.querySelector('#articleField'), {
            toolbar: {
                items: [
                    'heading',
                    '|',
                    'fontSize',
                    'fontColor',
                    'fontFamily',
                    'fontBackgroundColor',
                    'bold',
                    'italic',
                    'underline',
                    'link',
                    'bulletedList',
                    'numberedList',
                    'horizontalLine',
                    '|',
                    'indent',
                    'outdent',
                    '|',
                    'imageUpload',
                    'blockQuote',
                    'insertTable',
                    'mediaEmbed',
                    'undo',
                    'redo',
                    'codeBlock',
                    'code',
                    'highlight',
                    '|'
                ]
            },
            language: 'zh-cn',
            ckfinder: {
                uploadUrl: '[[@{/attachment/uploadForCkEditor}]]'
            },
            image: {
                toolbar: [
                    'imageTextAlternative',
                    'imageStyle:full',
                    'imageStyle:side'
                ]
            },
            table: {
                contentToolbar: [
                    'tableColumn',
                    'tableRow',
                    'mergeTableCells'
                ]
            },
        })
        .then(editor => {
            window.editor = editor;
        })
        .catch(error => {
            console.error(error);
        });
</script>
<script>
    var categories = "[[${categories}]]";
    var categoriesObj = JSON.parse(categories.replace(/&quot;/g, '"'));
    var html = '<option value="">请选择</option>';
    $.each(categoriesObj, function (i, item) {
        if (item.nodes.length > 0) {
            html += '<optgroup label="' + item.name + '" >';
            $.each(item.nodes, function (j, jItem) {
                html += '<option value="' + jItem.id + '">' + jItem.name + '</option>';
            })
            html += '</optgroup>';
        } else if (item.parent == null) {
            html += '<option value="' + item.id + '">' + item.name + '</option>';
        }
    })
    $("#category-select").html(html);

    $("input[name=slider]").on('ifChecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
        var slider = $("input[name=slider]:checked").val();
        var sliderSize = $("#upload-content").find(".upload-slider-div").size();
        if (slider == 1) {
            $("#sliderImgContent").show();
            if (sliderSize == 1) {
                $(".upload-slider-div").show();
            }
        } else {
            $("#sliderImgContent").hide();
            if (sliderSize == 1) {
                $(".upload-slider-div").hide();
            }
        }
    });

    $('[type="checkbox"].minimal,input[type="radio"].minimal').iCheck({
        checkboxClass: 'icheckbox_minimal-blue',
        radioClass: 'iradio_minimal-blue',
    });

    function saveArticle(status) {
        if (validArticle()) {
            Core.confirm("确认保存文章？", function () {
                $("#status").val(status);
                Core.postAjax("/article/add", $("#articleForm").serialize(), function (data) {
                    if (data.status === 200) {
                        window.editor.setData('');
                        Core.load("#content", "article/add");
                    }
                    layer.msg(data.msg)
                })
            })
        }
    }

    function validArticle() {
        if (doValidForm(articleForm)) {
            var content = window.editor.getData();
            if (content) {
                $("#articleContentMd").val(content);
                $("#articleContent").val(content);
                var tags = [];
                $('input[name="tag"]:checked').each(function () {
                    tags.push($(this).val());
                });
                if (tags.length > 0) {
                    return true;
                } else {
                    layer.msg("请选择文章标签！")
                }
            } else {
                layer.msg("请输入文章内容！")
            }
        }
        return false;
    }

    function changeSlider(val) {
        console.log(val);
    }

    $(function () {
        /*上传图片*/
        $(".upload-img-btn").click(function () {
            if ($("#upload-content").find(".upload-img-div").size() == 0) {
                var imgHtml = '<div class="col-md-12 upload-div upload-img-div">' +
                    '<div class="upload-item">' +
                    '<p class="upload-title">封面图</p>' +
                    '<p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>' +
                    '<p class="upload-btns">' +
                    '<a type="button" class="btn btn-sm btn-block btn-info imgUploader">上传</a>' +
                    '</p>' +
                    '</div>' +
                    '</div>'
                $("#upload-content").append(imgHtml);
                $(".imgUploader").upload({
                    server: '[[@{/attachment/upload}]]',
                    swf: '/img/Uploader.swf',
                    imgAccept: true
                }, function (url, picker) {
                    $("#coverImage").val(url);
                    echoGtUploadResMethd(url, picker);
                });
            }
            ;
        })

        $(".upload-slider-btn").click(function () {
            if ($("#upload-content").find(".upload-slider-div").size() == 0) {
                var imgHtml = '<div class="col-md-12 upload-div upload-slider-div">' +
                    '<div class="upload-item">' +
                    '<p class="upload-title">轮播图</p>' +
                    '<p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>' +
                    '<p class="upload-btns">' +
                    '<a type="button" class="btn btn-sm btn-block btn-info sliderUploader">上传</a>' +
                    '</p>' +
                    '</div>' +
                    '</div>'
                $("#upload-content").append(imgHtml);
                $(".sliderUploader").upload({
                    server: '[[@{/attachment/upload}]]',
                    swf: '/img/Uploader.swf',
                    imgAccept: true
                }, function (url, picker) {
                    $("#sliderImg").val(url);
                    echoGtUploadResMethd(url, picker);
                });
            }
            ;
        })


    })
</script>